import React from 'react'
import  ReactDOM  from 'react-dom'
import { ListView } from 'antd-mobile'
import { connect } from 'dva'
function MyBody (props) {
  return (
    <div className="am-list-body my-body">
      <span style={{ display: 'none' }}>you can custom body wrap element</span>
      {props.children}
    </div>
  )
}

// 定义初始数据的有几个section 有几个row
// const NUM_ROWS_PER_SECTION = 7
// function genData () {
//   for (let i = 0;i < NUM_ROWS_PER_SECTION; i++) {
//     dataBlobs.push(i)
//   }
//   console.log(dataBlobs)
// }
// function genData () {
//   for (let i = 0;i < NUM_ROWS_PER_SECTION; i++) {
//     data.push(
//       {
//         img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
//         title: 'Eat the week',
//         des: '不是所有的兼职汪都需要风吹日晒'
//       }
//     )
//   }
// }
const Demo = ({dispatch,data}) => {
  const dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
  }).cloneWithRows(data)
  const row = (rowData, sectionID, rowID) => {
    console.log(rowData)
     return (
       <div key={rowID} style={{ padding: '0 15px' }}>
         <div
           style={{
             lineHeight: '50px',
             color: '#888',
             fontSize: 18,
             borderBottom: '1px solid #F6F6F6'
           }}
         >
          {rowData.title}
         </div>
         <div
           style={{
             display: '-webkit-box',
             display: 'flex',
             padding: '15px 0'
           }}
         >
           <img
             style={{ height: '64px', marginRight: '15px' }}
             alt=""
             src={rowData.img}
           />
           <div style={{ lineHeight: 1 }}>
             <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
              {rowData.des}
             </div>
             <div>
               <span style={{ fontSize: '30px', color: '#FF6E27' }}>35</span>¥{' '}
               {rowID}
             </div>
           </div>
         </div>
       </div>
     )
   }
   const onEndReached = event => {
    
    dispatch({
      type: 'listView/dataAction',
    })
    console.log('reach end', event)
  }

  return (
    <ListView
        dataSource={dataSource}
        renderHeader={() => <span>header</span>}
        renderBodyComponent={() => <MyBody />}
        renderRow={row}
        style={{
          overflow: 'auto',
          height:'100vh'
        }}
        pageSize={2}
        onScroll={() => {
          console.log('scroll')
        }}
        scrollRenderAheadDistance={500}
        onEndReached={onEndReached}
        onEndReachedThreshold={100}
      />
  )
}
// class Demo extends React.Component {
//   constructor (props) {
//     super(props)
//     console.log(props.data)
//     const data = props.data
//     const dataSource = new ListView.DataSource({
//       rowHasChanged: (row1, row2) => row1 !== row2,
//     })
//     this.state = {
//       data,
//       dataSource,
//       isLoading: true,
//       height: (document.documentElement.clientHeight * 3) / 4
//     }
//   }

//   componentDidMount () {
//     // you can scroll to the specified position
//     // setTimeout(() => this.lv.scrollTo(0, 120), 800);

//     const hei =
//       document.documentElement.clientHeight -
//       ReactDOM.findDOMNode(this.lv).parentNode.offsetTop
//     // simulate initial Ajax
//     setTimeout(() => {
//       // genData 获取dataBlobs对象里面有section模块 row行数据信息
//       // genData()
//       this.setState({
//         dataSource: this.state.dataSource.cloneWithRows(
//           this.data,
//         ),
//         isLoading: false,
//         height: hei
//       })
//     }, 600)
//   }

//   // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
//   // componentWillReceiveProps(nextProps) {
//   //   if (nextProps.dataSource !== this.props.dataSource) {
//   //     this.setState({
//   //       dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
//   //     });
//   //   }
//   // }

//   onEndReached = event => {
//     // load new data
//     // hasMore: from backend data, indicates whether it is the last page, here is false
//     if (this.state.isLoading && !this.state.hasMore) {
//       return
//     }
//     console.log('reach end', event)
//     this.setState({ isLoading: true })
//     setTimeout(() => {
//       // genData()
//       this.setState({
//         dataSource: this.state.dataSource.cloneWithRows(
//           this.data,
//         ),
//         isLoading: false
//       })
//     }, 1000)
//   }

//   render () {
//     const row = (rowData, sectionID, rowID) => {
//      console.log(rowData)
//       return (
//         <div key={rowID} style={{ padding: '0 15px' }}>
//           <div
//             style={{
//               lineHeight: '50px',
//               color: '#888',
//               fontSize: 18,
//               borderBottom: '1px solid #F6F6F6'
//             }}
//           >
//           </div>
//           <div
//             style={{
//               display: '-webkit-box',
//               display: 'flex',
//               padding: '15px 0'
//             }}
//           >
//             <img
//               style={{ height: '64px', marginRight: '15px' }}
//               alt=""
//             />
//             <div style={{ lineHeight: 1 }}>
//               <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
//               </div>
//               <div>
//                 <span style={{ fontSize: '30px', color: '#FF6E27' }}>35</span>¥{' '}
//                 {rowID}
//               </div>
//             </div>
//           </div>
//         </div>
//       )
//     }

//     return (
//       <ListView
//         ref={el => (this.lv = el)}
//         dataSource={this.state.dataSource}
//         renderHeader={() => <span>header</span>}
//         renderFooter={() => (
//           <div style={{ padding: 30, textAlign: 'center' }}>
//             {this.state.isLoading ? 'Loading...' : 'Loaded'}
//           </div>
//         )}
//         renderBodyComponent={() => <MyBody />}
//         renderRow={row}
//         style={{
//           height: this.state.height,
//           overflow: 'auto'
//         }}
//         pageSize={2}
//         onScroll={() => {
//           console.log('scroll')
//         }}
//         scrollRenderAheadDistance={500}
//         onEndReached={this.onEndReached}
//         onEndReachedThreshold={100}
//       />
//     )
//   }
// }
export default connect(state => state.listView)(Demo)
